<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h1>表单输入绑定</h1>
    <input type="text" :value="value" @input="handleInput">
    <p>value: {{value}}</p>

    <hr>

    <h3>v-model指令</h3>
    <input type="text" v-model="value2">
    <p>value2: {{value2}}</p>

    <hr>

    <h3>多行文本框</h3>
    <textarea name="" id="" v-model="textareaValue"></textarea>
    <p>textareaValue: {{textareaValue}}</p>

    <hr>

    <h3>复选框</h3>
    <!-- 当多选框只有一个的时候，v-model绑定的变量是一个布尔值类型的 -->
    <input type="checkbox" v-model="checked" true-value="yes" false-value="no" />
    <label for="checkbox">{{ checked }}</label>

    <!-- 当多选框有多个的时候(有多个多选框同时绑定了同一个变量的时候) -->
    <!-- 那么绑定的这个值是一个数组类型 -->
    <div>Checked names: {{ checkedNames }}</div>
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames" />
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
    <label for="mike">Mike</label>

    <h3>单选按钮</h3>

    <div>Picked: {{ picked }}</div>
    <input type="radio" id="one" value="1" v-model="picked" />
    <label for="one">男</label>
    <input type="radio" id="two" value="2" v-model="picked" />
    <label for="two">女</label>


    <h3>下拉框</h3>

    <div>Selected: {{ selected }}</div>

    <select v-model="selected">
      <option disabled value="">Please select one</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>


    <h1>v-model装饰器</h1>
    <h3>lazy装饰器</h3>
    <!-- 内容改变并且失去焦点的时候同步数据 -->
    <input type="text" v-model.lazy="value3">
    <p>value3: {{value3}}</p>

    <hr>

    <h3>number修饰器</h3>
    <!-- 用于将输入框的内容转成数字 -->
    <input type="text" v-model.number="value4">
    <p>value4: {{value4}}</p>
    <p>value4-type: {{ typeof value4 }}</p>

    <hr>

    <h3>trim装饰器</h3>

    <!-- 用于去除输入框的首尾空格 -->
    <input type="text" v-model.trim="value5">
    <p>value5: {{value5}}</p>
    <button @click="fn3">btn</button>
  </div>

  <script src="../Vue.js"></script>

  <script>
    const { createApp } = Vue;

    createApp({
      data() {
        return {
          value: "hhh000",
          value2: "",
          textareaValue: "",
          checked: true,
          checkedNames: [],
          picked: "",
          selected: "",
          value3: "",
          value4: "",
          value5: ""
        }
      },
      methods: {
        handleInput(e) {
          // console.log(e.target.value);    
          this.value = e.target.value
        },
        fn3() {
          console.log(this.value5);
          
        }
      }
    }).mount("#app")

  </script>
</body>
</html>